<template>
  <div id="cluereport">
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="66%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="resetForm('form')"
    >
      <template v-if="loadingText">
        {{ loadingText }}
      </template>
      <el-form v-else ref="form" :model="submitForm" label-width="100px">
        <el-form-item label="单位名称" prop="name" :rules="[{ required: true, message: '请输入单位名称', trigger: 'blur' }]">
          <el-input v-model="submitForm.name" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="登录名称" prop="loginName" :rules="[{ required: true, message: '请输入登录名称', trigger: 'blur' }]">
          <el-input v-model="submitForm.loginName" placeholder="请输入登录名称" />
        </el-form-item>
        <el-form-item label="单位编码" prop="jgsyCode">
          <el-input v-model="submitForm.jgsyCode" placeholder="请输入单位编码" />
        </el-form-item>
        <el-form-item label="单位类型" prop="unitTypeName">
          <span>{{ submitForm.unitTypeName }}</span>
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" :loading="btnLoading" @click="submitUnit('form')">确定</el-button>
          <el-button @click="dialogVisible = false" style="color: #000 !important;">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/staffing' }">机构编制管理</el-breadcrumb-item>
      <el-breadcrumb-item>单位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxs">
      <div style="margin: 10px;">
        单位类型
        <el-select v-model="unitTypeName" placeholder="请选择" clearable style="margin: 0 6px;">
          <el-option
            v-for="item in unitTypeNameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" circle @click="getUnitList(true)"></el-button>
      </div>
    </section>
    <section class="wboxd" style="margin-top:10px">
      <el-table :data="unitList" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border ref="multipleTable">
        <el-table-column type="index" label="序号" width="100" fixed align="center" class-name="tableth">
        </el-table-column>
        <el-table-column prop="name" label="单位名称"  align="center">
        </el-table-column>
        <el-table-column prop="loginName" label="登录名称" align="center">
        </el-table-column>
        <el-table-column prop="jgsyCode" label="单位编码" width="300" align="center">
        </el-table-column>
        <el-table-column prop="unitTypeName" label="单位类型" width="200" align="center">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getUnitDetailInfo(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination style="float:right" :total="totalnum" :page-size="pageSize" @current-change="handleCurrentChange" :current-page="pageNum" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageNum: 1,
      pageSize: 20,
      listLoading: false,
      unitList: [],
      totalnum: null,
      changeSizeFlag: false,
      unitTypeName: '',
      unitTypeNameOptions: [
        {label: '机关司局', value: '机关司局'},
        {label: '派出机构', value: '派出机构'},
        {label: '直属事业单位', value: '直属事业单位'}
      ],
      btnLoading: false,
      loadingText: '加载中...',
      dialogVisible: false,
      submitForm: {},
      tableHeight: 100
    }
  },
  methods: {
    getUnitList (flag) {
      if (flag) {
        this.pageNum = 1
      }
      const para = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        unitTypeName: this.unitTypeName
      }
      this.listLoading = true
      this.$http
        .post(this.$http.defaults.headcountAPI + `api/busUnit/queryByPage`, para)
        .then(response => {
          this.listLoading = false
          if (response.data.success) {
            this.unitList = response.data.result.records
            this.totalnum = response.data.result.total
            this.changeSizeFlag = false
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    handleSizeChange (val) {
      this.changeSizeFlag = true
      this.pageNum = 1
      this.pageSize = val
      this.getUnitList()
    },
    handleCurrentChange (val) {
      if (this.changeSizeFlag === false) {
        this.pageNum = val
        this.getUnitList()
      }
    },
    getUnitDetailInfo (id) {
      this.dialogVisible = true
      this.loadingText = '加载中...'
      this.$http
        .get(this.$http.defaults.headcountAPI + `api/busUnit/getById?id=` + id)
        .then(response => {
          if (response.data.success) {
            this.submitForm = response.data.result
            this.loadingText = ''
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    submitUnit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const para = {}
          para.id = this.submitForm.id
          para.name = this.submitForm.name
          para.loginName = this.submitForm.loginName
          para.jgsyCode = this.submitForm.jgsyCode
          this.btnLoading = true
          this.$http
            .post(this.$http.defaults.headcountAPI + `api/busUnit/save`, para)
            .then(response => {
              this.btnLoading = false
              if (response.data.success === true) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.getUnitList()
                this.dialogVisible = false
              } else {
                console.log('操作失败:' + response.data.message)
                this.$message({
                  message: '操作失败:' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch(error => {
              console.log(error)
              this.btnLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 260
      })
    }
  },
  mounted () {
    this.getUnitList()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style>
#cluereport .el-drawer__wrapper{
  width: 100%;
  height: 100%;
  position: fixed !important;
  overflow: hidden;
}
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #testlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  #cluereport .el-table td{
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }
</style>
<style scoped>
  #cluereport .el-button{
    color:#fff !important;
  }
  #cluereport h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  #cluereport .wboxs{
    width: 100%;
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
    padding:0;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
